import ZCheckTag from "../../packages/check-tag"; // 替换成你的组件路径
import "../../packages/theme-chalk/src/index.scss";

describe("CheckTag", () => {
  it("renders correctly with default props", () => {
    cy.mount(ZCheckTag);
    cy.get(".z-check-tag").should("exist"); // 检查组件是否渲染
  });

  it("renders slot content", () => {
    cy.mount(ZCheckTag, {
      slots: {
        default: "Test Content",
      },
    });
    cy.contains("Test Content").should("exist"); // 检查插槽内容是否渲染
  });

  it('emits "change" event with the toggled checked value', () => {
    const onChangeSpy = cy.spy().as("onChangeSpy");
    cy.mount(ZCheckTag, {
      propsData: { checked: false },
      slots: {
        default: "Test Content",
      },
      listeners: { change: onChangeSpy },
    }); // Start with unchecked state

    cy.get(".z-check-tag").click(); // Simulate a click
    cy.get("@onChangeSpy").should("have.been.calledWith", true); // Check for true
    cy.get('@vue').invoke('setProps', {
        checked: true
    })

    cy.get(".z-check-tag").click(); // Click again to toggle back
    cy.get("@onChangeSpy").should("have.been.calledWith", false); // Check for false
  });

  it('emits "close" event when close icon is clicked', () => {
    const onCloseSpy = cy.spy().as("onCloseSpy");
    cy.mount(ZCheckTag, {
      propsData: { closable: true },
      slots: {
        default: "Test Close Content",
      },
      listeners: { close: onCloseSpy },
    });

    cy.get(".z-check-tag__close").invoke('show').click({ force: true });
    cy.get("@onCloseSpy").should("have.been.called");
  });

});
